<template>
    <div class="outmain ba_f heighthv pad_20 bor_rad5">
        <div class="shuju_title mar_b20">
            <div class="shuju_title_text">
                <span>微信小程序外链生成工具</span>
            </div>
        </div>
        <div class="flex-bet pad_lr_20">
            <div>
                <el-button type="primary" @click="handleEdit" size="medium">新建页面跳转链接</el-button>
            </div>
        </div>
        <div class="tabledata mar_t20">
            <el-table
                    :data="list"
                    v-loading="listLoading"
                    :element-loading-text="elementLoadingText"
                    stripe
                    class="tablecenter"
                    style="width: 100%"
            >
                <el-table-column
                        prop="name"
                        label="链接名称"
                >
                    <template slot-scope="scope">
                        <div>{{ scope.row.title }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="message"
                        label="生成时间"
                >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.createdAt }}
                      </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="message"
                    label="过期时间"
                >
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.expire_time }}
                    </div>
                  </template>
                </el-table-column>
              <el-table-column
                  prop="path"
                  label="页面链接"
              >
              </el-table-column>
                <el-table-column
                    prop="message"
                    label="微信内部链接"
                >
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.scene }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="message"
                    label="外部链接（微信短链）"
                >
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.link }}
                    </div>
                  </template>
                </el-table-column>
<!--                <el-table-column-->
<!--                    prop="message"-->
<!--                    label="外部链接（自定义）"-->
<!--                >-->
<!--                  <template slot-scope="scope">-->
<!--                    <div>-->
<!--5-->
<!--                    </div>-->
<!--                  </template>-->
<!--                </el-table-column>-->
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    :page-size="page.pagesize"
                    :current-page.sync='page.currentPage'
                    @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import {getCreateUrl} from "@/api/plug";
    import {timestampToTime} from "@/utils/index";

    export default {
        created() {
            this.fetchData();
        },
        data() {
            return {
                list: [],
                listLoading: false,
                selectRows: "",
                elementLoadingText: "正在加载...",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
            }
        },
        methods: {
            async fetchData() {
                this.listLoading = true;
                const {data, count} = await getCreateUrl({page: this.page.currentPage});
                for(let i=0;i<data.length;i++){
                  data[i].createdAt = timestampToTime(data[i].createdAt)
                  if(data[i].expire_time=='0'){
                    data[i].expire_time = '无限'
                  }else{
                    data[i].expire_time = timestampToTime(data[i].expire_time)
                  }

                }
                this.list = data;
                this.page.total = count;
                this.listLoading = false;
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
            handleEdit(row) {
                if (row.id) {
                    this.$router.push(`/linkslistAdd?id=${row.id}&type=${row.type}`);
                } else {
                    this.$router.push({path: 'linkslistAdd'})
                }
            },
        }
    }
</script>
